<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>达人简介</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        .talent_intro_bg {
            width: 100%;
            height: 135px;
            background-color: #fff;
            position: relative;
        }

        .talent_intro_bg .picture {
            width: 100%;
            height: 100px;
            background-image: url(../../image/talent_intro_bg.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .talent_intro_bg .head_img {
            width: 70px;
            height: 70px;
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: 0px;
            border-radius: 50%;
            /*background-color: red;*/
        }
        .talent_intro_bg .head_img img{
          display: block;
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }

        .wrap .username {
            width: 100%;
            /* height: 15px; */
            line-height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: center;
            padding-top: 12px;
            background-color: #fff;
        }

        .wrap .info {
            width: 100%;
            overflow: hidden;
            padding: 15px 0;
            background-color: #fff;
        }

        .wrap .info .note {
            width: 100%;
            text-align: center;
            height: 15px;
            line-height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .wrap .info .info_content {
            width: 100%;
            padding: 0 74px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            margin-top: 16px;
            overflow: hidden;
        }

        .wrap .info .info_content .info_content_l span {
            display: block;
            text-align: center;
            height: 13px;
            line-height: 13px;
            font-size: 13px;
            color: #333333;
        }

        .wrap .info .info_content .info_content_l span:last-child {
            margin-top: 6px;
        }

        .wrap .list {
            width: 100%;
            overflow: hidden;
        }

        .wrap .list ul {
            width: 100%;
            overflow: hidden;
        }

        .wrap .list ul li {
            width: 100%;
            overflow: hidden;
            padding: 15px 0px 10.5px 0px;
            box-sizing: border-box;
            background-color: #fff;
            margin-top: 10px;
        }

        .wrap .list ul li div.item {
            width: 100%;
            padding: 0 15px;
            overflow: hidden;
        }

        .wrap .list ul li div.item div.title {
            width: 100%;
            height: 15px;
            line-height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
        }

        .wrap .list ul li div.item div.picture {
            width: 100%;
            height: 100px;
            border-radius: 5px;
            /*background-color: red;*/
            margin-top: 10px;
        }
        .wrap .list ul li div.item div.picture img{
          display: block;
          width: 100%;
          height: 100%;
        }

        .wrap .list ul li div.item div.operation {
            width: 100%;
            margin-top: 10px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

        .wrap .list ul li div.item div.operation .operation_l {
            display: flex;
        }

        .wrap .list ul li div.item div.operation .operation_l span {
            height: 15px;
            line-height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .wrap .list ul li div.item div.operation .operation_r span:first-child {
            width: 13px;
            height: 11px;
            margin-top: 2px;
        }

        .wrap .list ul li div.item div.operation .operation_r span:first-child img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .wrap .list ul li div.item div.operation .operation_r span:last-child {
            margin-left: 4px;
            height: 15px;
            line-height: 15px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #666666;
        }

        .wrap .list ul li div.item div.operation .operation_l span:last-child {
            margin-left: 4px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="wrap">
            <div class="talent_intro_bg">
                <div class="picture"></div>
                <div class="head_img"><img :src="talentinfo.headImg" alt=""></div>
            </div>
            <div class="username">{{talentinfo.talentName}}</div>
            <div class="info">
                <div class="note">{{talentinfo.autograph}}</div>
                <div class="info_content">
                    <div class="info_content_l">
                        <span>{{talentinfo.readtimes}}</span>
                        <span>阅读</span>
                    </div>
                    <div class="info_content_l">
                        <span>{{talentinfo.followtimes}}</span>
                        <span>喜欢</span>
                    </div>
                </div>
            </div>
            <div class="list">
                <ul>
                    <li v-for='item in dataList' @click='openTalentSayDetailsPage(item.id,item.name)'>
                        <div class="item">
                            <div class="title">{{item.shortTitle}}</div>
                            <div class="picture"><img :src="item.articleBanner" alt=""></div>
                            <div class="operation">
                                <div class="operation_l">
                                    <span>{{item.readTimes}}</span>
                                    <span>阅读</span>
                                </div>
                                <div class="operation_r" style="display: flex;">
                                    <span><img src="../../image/dianzan.png" alt=""></span>
                                    <span>{{item.followTimes}}</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/cling.js"></script>
<script type="text/javascript">
    apiready = function() {
        console.log(JSON.stringify(api.pageParam.id));

        vm.init(api.pageParam.id);
        vm.initRefresh();
        vm.bottomLoad();
    }

    var vm = new Vue({
        el: "#app",
        data: {
            id:'',
            talentinfo: '',
            dataList: [],
            offset: 0
        },
        methods: {
            init: function(id, isClick) {
                console.log(id);
                vm.id = id;
                if (isClick) {
                    vm.offset += 10;
                } else { // 下拉刷新 或者 初次加载
                    vm.offset = 0;
                }
                cl.openLoading();
                api.ajax({
                    url: cl.apiServer + 'doumee/talentInfo/man_articles',
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8',
                        token:cl.userToken
                    },
                    data: {
                        body: {
                            limit: 10,
                            offset: vm.offset,
                            talentId: id,
                            version:cl.deviceInfo().appVersion,
                            mobileInfo:cl.systemType()
                        }
                    }
                }, function(ret, err) {
                    if (ret) {

                        if (ret.code == 0) {
                            cl.closeLoading();
                            vm.talentinfo = ret.data;
                            console.log(JSON.stringify(vm.talentinfo));
                            if (ret.data.manArticlesVOList.length >= 10) {
                                vm.no_more = false;
                                vm.dataList = vm.dataList.concat(ret.data.manArticlesVOList);
                            } else if (ret.data.length == 0) {
                                vm.no_more = true;
                            } else {

                                vm.dataList = vm.dataList.concat(ret.data.manArticlesVOList);
                            }
                        }
                    }
                });
            },
            //下拉刷新
            initRefresh: function() {
                cl.openRefresh(function() {
                    vm.init(api.pageParam.id);
                })
            },
            //上拉加载
            bottomLoad: function() {
                cl.scrollBottom(function() {
                    vm.init(vm.id,true);
                })
            },
            openTalentSayDetailsPage: function(id, title) {
                console.log(id);
                cl.openWin({
                    name: 'talent_say_details',
                    pageParam: {
                        id: id,
                        title: title
                    }
                })
            }
        }
    })
</script>

</html>
